<template>
  <div class="alert-wrapper">
    <!-- <div class="add-button" strong block type="primary">新增报警</div> -->
    <!-- input搜索框 -->
    <div class="inputSeach">
      <n-input placeholder="搜索">
        <template #suffix>
          <button class="buttonSeach"></button>
        </template>
      </n-input>
    </div>
    <!-- ---------------------------- -->
    <!-- 三个按钮 -->
    <div class="handleCondition">
      <div :class="[switchRed == true ? 'Condition_Red' : '', 'Condition_1']" @click="Pending()">
        <div class="Condition1_1">待处理</div>
      </div>
      <div :class="[switchYellow == true ? 'Condition_Yellow' : '', 'Condition_2']" @click="confirmed()">
        <div class="Condition2_2">待确认</div>
      </div>
      <div :class="[switchGreen == true ? 'Condition_Green' : '', 'Condition_3']" @click="completed()">
        <div class="Condition3_3">已完成</div>
      </div>

      <!-- <div v-for="item in condition" :key="item.id" class="Condition_1" :style="{background:'url('+item.back+')'}"> -->
      <!-- <img :src="item.back" alt=""> -->
      <!-- <div class="Condition1_1">{{ item.name }}</div> -->
      <!-- </div> -->
    </div>
    <!-- ------------------------------------------------- -->
    <div class="alert-list">
      <!-- 单独每一项 -->
      <div class="alert-item" v-for="item in countData.list" @click="clickItem()">
        <!-- 图标 -->
        <div class="icon">
          {{ item.id }}
        </div>

        <div class="alert-item_1">
          <!-- 头 -->
          <div class="top">
            <div class="alert-title">【{{ item.alarm_type.name }}】</div>
            <div class="alert-date">{{ item.alarm_type.createTime }}</div>
          </div>
          <!-- 中间 -->
          <div class="center">{{ item.content }}</div>
          <!-- 底部 -->
          <div class="bottom">
            <div class="address">
              <n-icon size="14px" color="#2D91DBFF">
                <Location></Location>
              </n-icon>
              <span>{{ item.location }}</span>
            </div>
            <!-- <div class="status">
              {{ item.status == 0 ? "待处理" : "已处理" }}
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="pagination">
      <n-pagination v-model:page="page" :page-count=totalPage size="small" @update:page="changePage(page)"
        @next="nextPage" />
    </div>

    <div class="bottomAdd" @click="switchLeft()">
      <!--  -->
      <div class="bottomAdd_1">
        <div class="bottomAdd_icon"></div>
        <div class="bottomAdd_font">新增报警</div>
      </div>
    </div>
  </div>

  <!-- <div class="popupsStyle" > -->
  <popups v-if="handleShow" @closePopus="closePopus" @openTwoP="openTwoP"></popups>
  <!-- </div> -->

  <popups2 v-if="handleShow2" @closePopus2="closePopus2" @openPopup2_1="openPopup2_1"></popups2>

  <popups2_1 v-if="handleShow2_1" @closePopus2_1="closePopus2_1"></popups2_1>

  <popups3 v-if="handleShow3" @closePopus3="closePopus3" @openPopup3_1="openPopup3_1"></popups3>

  <popups3_1 v-if="handleShow3_1" @closePopus3_1="closePopus3_1"></popups3_1>

  <AlarmConfirmation v-if="openTpop" @closeAlarm="closeAlarm" @openThreeP="openThreeP"></AlarmConfirmation>

  <AddPeople v-if="openLtpop" @closeThreeP="closeThreeP" @openTwoP="openTwoP"></AddPeople>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import dayjs from "dayjs";
import { Location, Watch } from "@vicons/ionicons5";
import popups from "../../../components/left/Popups.vue"
// 待处理一级弹窗
import popups2 from "../../../components/left/Popups2.vue"
// 待处理二级弹窗
import popups2_1 from "../../../components/left/Popups2_1.vue"
// 已确定一级弹窗
import popups3 from "../../../components/left/Popups3.vue"
// 已确定二级弹窗
import popups3_1 from "../../../components/left/Popups3_1.vue"
import AlarmConfirmation from "../../../components/left/AlarmConfirmation.vue"
import AddPeople from "../../../components/left/AddPeople.vue"
// import { alarmInfo, refreshToken } from "../../../api/model"
const page = ref(1);
// 控制状态,1,2,3
let handleState = ref(1)

// 控制按钮颜色
// 待处理
let switchRed = ref(false)
// 待确认
let switchYellow = ref(false)
// 已完成
let switchGreen = ref(false)
let mapping: any = ref([])

// 待处理
const data = ref([
  {
    label: "发生火灾1",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 1,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
  {
    label: "发生火灾",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 2,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
  {
    label: "发生火灾",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 3,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
  {
    label: "发生火灾",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 4,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
]);

// 按钮
const condition = [
  {
    id: 1,
    name: '待处理',
    back: '../../../assets/border/red.png'
    // back:require('@/assets/border/red.png')
  },
  {
    id: 2,
    name: '待确认',
    back: '../../../assets/border/yellow.png'
  },
  {
    id: 3,
    name: '已完成',
    back: '../../../assets/border/greed.png'
  },
]

// 待确认
const data1 = ref([
  {
    label: "待确认",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 1,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
  {
    label: "待确认",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 2,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },
]);
// 已完成
const data2 = ref([
  {
    label: "已完成",
    desc: "发生火灾需要支援",
    address: "园区A办公楼A栋",
    status: 0,
    number: 1,
    date: dayjs(new Date()).format("YY-MM-DD HH:mm:ss"),
  },

]);

// 需要渲染的数据
let countData = <any>ref([])

let handleShow = ref(false)
// 控制待处理一级弹窗显隐
let handleShow2 = ref(false)
let handleShow2_1 = ref(false)
// 控制已确定弹窗显隐
let handleShow3 = ref(false)
let handleShow3_1 = ref(false)

// 控制待确定二级弹窗
let openTpop = ref(false)
// 控制待确定三级弹窗
let openLtpop = ref(false)
const emit = defineEmits(['handleComponent'])

const totalPage: any = ref()

/**
 * 每一项点击事件
 */
const clickItem = () => {
  // if (openTpop.value == true) return
  // if (openLtpop.value == true) return
  // handleShow.value = true;
  // console.log('点击了');
  switch (handleState.value) {
    case 1: PendingFun(); break;
    case 2: confirmedFun(); break;
    case 3: completedFun(); break;
  }

};

/**
 * 打开待处理一级函数弹框
 */
const PendingFun = () => {
  // console.log('待处理函数')
  if (handleShow2.value == true) return
  if (handleShow2_1.value == true) return
  handleShow2.value = true
}
/**
 * 关闭待处理一级弹窗
 */
const closePopus2 = () => {
  handleShow2.value = false
}
/**
 * 打开待处理二级弹窗
 */
const openPopup2_1 = () => {
  handleShow2_1.value = true
}
/**
 * 关闭待处理二级弹窗
 */
const closePopus2_1 = () => {
  handleShow2_1.value = false
}

/**
 * 打开待确定对话框
 */
const confirmedFun = () => {
  console.log('待确认函数')
  if (openTpop.value == true) return
  if (openLtpop.value == true) return
  handleShow.value = true;
}

/**
 * 打开已完成一级对话框函数
 */
const completedFun = () => {
  if (handleShow3_1.value == true) return
  handleShow3.value = true
  console.log('已完成函数')
}
/**
 * 关闭已完成一级对话框函数
 */
const closePopus3 = () => {
  handleShow3.value = false
}
/**
 * 打开已完成二级对话框
 */
const openPopup3_1 = () => {
  handleShow3_1.value = true
}
/**
 * 关闭已完成二级对话框
 */
const closePopus3_1 = () => {
  handleShow3_1.value = false
}


/**
 * 关闭弹窗
 */
const closePopus = () => {
  handleShow.value = false;
};

/**
 * 打开二级弹窗
 */
const openTwoP = () => {
  // console.log("确实触发了");
  openTpop.value = true;
};

/**
 * 关闭二级弹窗
 */
const closeAlarm = () => {
  openTpop.value = false
}

/**
 * 打开关闭三级弹窗
 */
const openThreeP = () => {
  openLtpop.value = true
  // console.log('确实', openLtpop.value)
}

const closeThreeP = () => {
  openLtpop.value = false
}

/**
 * 触发父组件切换弹窗
 */
const switchLeft = async () => {
  emit('handleComponent')
  // let params = {
  //   refreshToken:localStorage.getItem("refreshToken")
  // }
  // console.log('sdddddddddd',localStorage.getItem("refreshToken"))
  // const data = await refreshToken(params)
  // console.log("data", data)
}

/**
 * 三个按钮切换待处理
 */
const Pending = () => {
  switchRed.value = !switchRed.value
  if (switchRed.value == true) {
    mapping.value.push(0)
  } else {
    mapping.value.forEach((item, index) => {
      if (item == 0) mapping.value.splice(index, 1)
    })
  }
  // console.log('mappingR', mapping.value)
  closeServe()
  countData.value = data.value
  handleState.value = 1
}

/**
 * 三个按钮切换待确认
 */
const confirmed = () => {
  switchYellow.value = !switchYellow.value
  if (switchYellow.value == true) {
    mapping.value.push(1)
  } else {
    mapping.value.forEach((item, index) => {
      if (item == 1) mapping.value.splice(index, 1)
    })
  }
  // console.log('mappingY', mapping.value)
  closeServe()
  countData.value = data1.value
  handleState.value = 2
}

/**
 * 三个按钮切换已完成
 */
const completed = () => {
  switchGreen.value = !switchGreen.value
  if (switchGreen.value == true) {
    mapping.value.push(2)
  } else {
    mapping.value.forEach((item, index) => {
      if (item == 2) mapping.value.splice(index, 1)
    })
  }
  // console.log('mappingS', mapping.value)

  closeServe()
  countData.value = data2.value
  handleState.value = 3
}

/**
 * 七个弹窗全部关闭
 */
const closeServe = () => {
  // 控制待处理一级弹窗显隐
  handleShow2.value = false
  handleShow2_1.value = false
  // 控制已确定弹窗显隐
  handleShow3.value = false
  handleShow3_1.value = false
  // 控制待确定弹窗显隐
  handleShow.value = false
  openTpop.value = false
  openLtpop.value = false
}

/**
 * 进入页面发起
 */
const getalarmInfo = async () => {
  const PageSize = {
    page: 1,
    size: 20,
  }
  // const { data }: any = await alarmInfo(PageSize)
  countData.value = data
  // totalPage.value = data.pagination.total
  // console.log("data", data.pagination.total)
}

/**
 * 分页数据
 */
const changePage = async (e) => {
  // console.log('eeee', e)
  const PageSize = {
    page: e,
    size: 20,
  }
  // const { data }: any = await alarmInfo(PageSize)
  countData.value = data
  // totalPage.value = data.pagination.total
}

/**
 * 下一页数据
 */
const nextPage = (e) => {
  console.log('sdfsd', e)
}


onMounted(() => {
  // countData.value = data.value
  console.log('一级界面');

  getalarmInfo()
})

watch(mapping.value, (newValue) => {
  if (newValue.length == 0) {
    console.log('为空了为空了为空了')
  } else {
    console.log('NewValue', newValue, newValue.length)
  }
})
</script>

<style lang="scss" scoped>
.alert-wrapper {
  // background-color: rgba(36, 85, 132,0.3);
  background-image: url("../../../assets/border/leftBorder.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // border: 1px solid red;
  width: 365px;
  height: 593px;
  // height: 954px;
  z-index: 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  color: #fff;
  position: absolute;
  border-radius: 4px;
  left: 10px;
  backdrop-filter: blur(4px);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
  user-select: none;

  //   .add-alert {
  //     width: 340px;
  //     height: 30px;
  //     border: 1px solid rgba(36, 115, 241, 1);
  //     border-radius: 10px;
  //   }
  .add-button {
    margin-bottom: 12px;
    width: 340px;
    height: 30px;
    // border: 1px solid rgba(36, 115, 241, 1);
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333;
    font-weight: bold;
  }

  // 搜索框
  .inputSeach {
    // border: 1px solid red;
    width: 100%;
    margin-bottom: 12px;

    .buttonSeach {
      width: 20px;
      height: 20px;
      // background-image: url("../../../");
      background-image: url("../../../assets/border/icon7.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // background-color: #075D9CFF;
      background-color: transparent;
      padding: 3px 3px;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }

  // 三个按钮
  .handleCondition {
    // border: 1px solid red;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .Condition_1 {
      width: 105px;
      height: 30px;
      // border: 1px solid red;
      background-image: url("../../../assets/border/red.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;

      .Condition1_1 {
        font-family: Alibaba PuHuiTi 2.0-75 SemiBold, Alibaba PuHuiTi 20;
        background: linear-gradient(180deg, #FFB7A7 0%, #E92C2C 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .Condition_Red {
      // border: 1px solid red;
      background-color: rgb(244, 54, 54, 0.5);
      border-radius: 10px;
    }

    .Condition_Yellow {
      background-color: rgb(199, 249, 100, 0.5);
      border-radius: 10px;
    }

    .Condition_Green {
      background-color: rgb(1, 143, 1, 0.7);
      border-radius: 10px;
    }

    .Condition_2 {
      width: 105px;
      height: 30px;
      // border: 1px solid red;
      background-image: url("../../../assets/border/yellow.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;

      .Condition2_2 {
        font-family: Alibaba PuHuiTi 2.0-75 SemiBold, Alibaba PuHuiTi 20;
        background: linear-gradient(180deg, #FFEED4 0%, #ED8E00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .Condition_3 {
      width: 105px;
      height: 30px;
      // border: 1px solid red;
      background-image: url("../../../assets/border/greed.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 14px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;

      .Condition3_3 {
        font-family: Alibaba PuHuiTi 2.0-75 SemiBold, Alibaba PuHuiTi 20;
        background: linear-gradient(180deg, #D1FBB1 0%, #33EB05 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .alert-list {
    // border: 1px solid red;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;

    .alert-item {
      width: 310px;
      padding: 12px;
      background-color: rgba(21, 71, 111, 0.5);
      // background-color: rgba(36, 85, 132,0.3);
      margin-bottom: 15px;
      border-radius: 4px;
      cursor: pointer;

      // border: 1px solid red;
      display: flex;

      // 图标
      .icon {
        width: 45px;
        height: 38px;
        // border: 1px solid red;
        margin-right: 10px;
        background-image: url("../../../assets/border/biaoxu.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // background-image: ;
        text-align: center;
        font-size: 19px;
        color: #FF051E;
        font-family: PingFang SC-Medium, PingFang SC;
        line-height: 38px;
      }

      .alert-item_1 {
        // border: 1px solid red;
        width: 100%;

        .top {
          // border: 1px solid red;
          display: flex;
          justify-content: space-between;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #77C5FF;
          text-indent: -5px;

          .alert-title {
            // border: 1px solid red;
            font-size: 14px;
          }

          .alert-date {
            font-size: 13px;
            // border: 1px solid red;
            text-align: center;
          }
        }

        .center {
          font-family: PingFang SC-Regular, PingFang SC;
          color: #D2ECFF;
          margin-top: 2px;
          text-indent: 2px;
          // border: 1px solid red;
          // font-size: 19px;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: PingFang SC-Regular, PingFang SC;
          color: #D2ECFF;
          // border: 1px solid red;
          margin-top: 3px;

          .address {
            display: flex;
            align-items: center;

            span {
              margin-left: 0.5em;
            }
          }
        }
      }
    }

    .alert-item:hover {
      background-color: rgba(23, 103, 161, 0.5);
    }
  }

  .pagination {
    margin-top: 5px;
    // border: 1px solid red;
  }

  // 底部新增
  .bottomAdd {
    width: 90%;
    height: 36px;
    // border: 1px solid red;
    background-image: url("../../../assets/border/button.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    position: absolute;
    bottom: 20px;

    .bottomAdd_1 {
      width: 90px;
      display: flex;
      // border: 1px solid red;
      justify-content: space-around;
      align-items: center;
      // cursor: pointer;


      .bottomAdd_icon {
        width: 16px;
        height: 16px;
        background-image: url("../../../assets/border/icon6.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .bottomAdd_font {
        font-family: PingFang SC-Medium, PingFang SC;
        color: #D2ECFF;
      }
    }
  }
}

:deep(.n-input .n-input-wrapper) {
  background-color: rgba(57, 121, 170, .5);
}

.popupsStyle {
  // border: 1px solid red;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // margin-left: 450px;
  // margin-top:0px
  // transform: translateX(-450px);
  // position: absolute;
  // top: 0;
  // left: 450px;
  // margin: auto;
  // bottom: 0;
  // right: 0;
}

@media (min-width: 1919px) {
  .alert-wrapper {
    height: 954px;

    // position: relative;
    .alert-list {
      height: 750px;
      // border: 1px solid red;
      overflow: hidden;
      overflow-y: auto;
    }

    .bottomAdd {
      // margin-top: 40px;
      // border: 1px solid rgb(161, 196, 22);
    }
  }
}
</style>
